{extend name="base" /}
{block name="css"}
{/block}
{block name="body"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <div class="layui-inline">
                <a id="btnAddAuth" class="layui-btn icon-btn ajax-iframe" href="{:url('admin/category/add')}" data-width="720px" data-height="450px"><i class="layui-icon">&#xe654;</i>添加栏目</a>
            </div>
        </div>
        <table id="tableAuth"></table>
        <!-- 表格操作列 -->
        <script type="text/html" id="tableBarAuth">
            <a class="layui-btn layui-btn-sm ajax-iframe" href="{:url('admin/category/add')}?pid={{d.id}}" data-width="720px" data-height="450px">添加子栏目</a>
            <a class="layui-btn layui-btn-sm ajax-iframe" href="{:url('admin/category/edit')}?id={{d.id}}" data-width="720px" data-height="450px">修改</a>
            <a class="layui-btn layui-btn-danger layui-btn-sm ajax-delete" href="{:url('admin/category/del')}?id={{d.id}}">删除</a>
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="sort_order">
            <input type="text" name="sort_order" value="{{d.sort_order}}" autocomplete="off" class="layui-input ajax-update" data-url="{:url('admin/category/edit')}?id={{d.id}}">
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="status">
            <input type="checkbox" name="status" lay-skin="switch" lay-filter="*" lay-text="正常|锁定" data-url="{:url('admin/category/edit')}?id={{d.id}}" {{d.status==1?'checked':''}}>
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="tuijian">
            <input type="checkbox" name="is_tuijian" lay-skin="switch" lay-filter="*" lay-text="推荐|不推荐" data-url="{:url('admin/category/edit')}?id={{d.id}}" {{d.is_tuijian==1?'checked':''}}>
        </script>
    </div>
</div>


{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'admin', 'treeTable', 'util'], function () {
        var $ = layui.jquery;
        var treeTable = layui.treeTable;

        // 渲染表格
        var insTb = treeTable.render({
            elem: '#tableAuth',
            tree: {
                iconIndex: 1,  // 折叠图标显示在第几列
                idName: 'id',  // 自定义id字段的名称
                pidName: 'pid',  // 自定义标识是否还有子节点的字段名称
                isPidData: true  // 是否是pid形式数据
            },
            cellMinWidth: 100,
            cols: [
                {type: 'numbers'},
                {field: 'name', title: '权限名称', width: 260},
                {field: 'model_name', title: '模型', width: 260},
                {title: '排序号', align: 'center', width: 150,templet:'#sort_order'},
                {field: 'menuIcon', title: '图标', align: 'center' },
                {align: 'center', width: 100,title: '是否推荐',templet:'#tuijian'},
                {align: 'center', width: 100,title: '状态',templet:'#status'},
                {templet: '#tableBarAuth', title: '操作', align: 'center', width: 250}
            ],
        
            reqData: function (data, callback) {
                $.get("{:url('admin/category/index_json')}", function (res) {
                   var data = res;
                    callback(data.data);
                });
            }
        });


    });
</script>
{/block}
